<template>
	<view class="container">
		<view class="nav">
			<view class="flex">
				<view class="navTitle">
					<view :class="{'active':isActive==1}" @click="checked(1)">
						今日
					</view>
				</view>
				<view class="navTitle">
					<view :class="{'active':isActive==2}" @click="checked(2)">
						昨日
					</view>
				</view>
				<view class="navTitle">
					<view :class="{'active':isActive==3}" @click="checked(3)">
						本周
					</view>
				</view>
				<view class="navTitle">
					<view :class="{'active':isActive==4}" @click="checked(4)">
						本月
					</view>
				</view>
			</view>
		</view>
		<view class="nav_item">
			<view class="tit" @click="popup">
				<text>{{title ? title : '选择机柜'}}</text>
				<image src="/static/img/detail/right.png" mode="widthFix"></image>
			</view>

			<view class="tit" v-if="charge">
				<text>使用<text>{{use}}</text>次</text>
				<text>总消费<text>{{money}}</text>元</text>
			</view>

			<view class="charge" v-if="charge">
				<view class="charge_item" v-for="(item,index) in dataInfo" :key='index'>
					<view class="item_top">
						<view class="top_left">
							<view class="add">
								{{item.name}}
							</view>
							<view class="date">
								<text>{{item.cdate}}</text>
							</view>
						</view>
						<view class="top_right">
							<!-- <view>
								{{item.dianchi}}
							</view> -->
							<view class="status">
								{{item.state_text}}
							</view>
<!--							-->
							<view v-if="item.is_end=='0'">
									<view class="u-btn" @click="endOrderFn(item.order_id,item.type)">
										结束订单
									</view>
							</view>
						</view>
					</view>
					<view class="item_b">
						<view v-for="(item1,index) in item.item" :key="item1.id">
							<text><font style="color: blue;">{{item.nickname}}</font>  {{item1.item_text}}</text>
						</view>
						<view>
							<text v-if="item.is_pay==3" style="color: red;font-weight: bold">已退款 {{item.refund_money}}元</text>
						</view>
					</view>
				</view>
			</view>

		</view>



		<view class="mask" v-if="operation">
			<view class="operation">
				<view class="tit">
					<text @click="select">全选</text>
					<text>设备列表</text>
					<text @click="confirm">确认</text>
				</view>

				<view class="list">
					<view class="list_item" v-for="(item,index) in list" :key="index">
						<view class="left">
							<image src="/static/img/agent/battery.png" mode="widthFix"></image>
							<view>
								<view class="name">
									{{item.name}}
								</view>
								<view class="money">
									总收入<text>￥{{item.all_income}}</text>
								</view>
							</view>
						</view>
						<view class="right">
							<radio :checked="item.isCheck" color="#34ACEF" @click="radio(index)" />
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="mask" v-if="showOverOrder">
			<view class="content">
				<image src="/static/img/index/close.png" mode="widthFix" @click="close"></image>
				<view class="tit">
					结束订单后<br/>是否需要用户支付费用?
				</view>
				<view class="list">
					<view class="list-item" @click="endOrderFnSubmit('2')">
						<text>否</text>
					</view>
					<view class="list-item" @click="endOrderFnSubmit('1')">
						<text>是</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		batteryMoney,
		batteryList,
		endOrder
	} from '../../../api/api.js'
	export default {
		data() {
			return {
				isActive: 1,
				operation: false,
				charge: false,
				list: [],
				ids: [],
				use: '',
				money: '',
				dataInfo: [],
				title: '',
				name: '',
				showOverOrder:false
			}
		},
		onLoad() {
			this.getList();
			this.getMoney();
		},
		methods: {
			checked(type) {
				this.isActive = type
				this.getMoney()
			},
			popup() {
				this.operation = true
			},
			radio(index) {
				this.list[index].isCheck = !this.list[index].isCheck;
				this.name = this.list[index].name;
				if (this.list[index].isCheck == true) {
					this.ids.push(this.list[index].id)
				} else {
					for (let i = 0; i < this.ids.length; i++) {
						if (this.ids[i] == this.list[index].id) {
							this.ids.splice(i, 1)
						}
					}
				}
			},
			select() {
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isCheck = true
				}
				// setTimeout(function() {

				// }, 1000);
				this.operation = false
				this.report = true
				this.ids = [0]
				this.charge = true
				this.getMoney()
			},
			confirm() {
				if (this.list.findIndex(i => i.isCheck === true) == -1) {
					uni.showToast({
						icon: 'none',
						title: '请选择机柜'
					})
					return
				} else {
					// console.log(this.list.filter(i => i.isCheck == true))
					this.operation = false
					this.report = true
					this.title = this.name;
				}
				this.charge = true
				this.getMoney()
			},
			getMoney() {
				let device_id = this.ids.join()
				console.log(device_id)
				batteryMoney({
					ctype: this.isActive,
					device_id: device_id
				}).then(res => {
					console.log(res)
					this.charge = true
					this.use = res.data.use_all_num
					this.money = res.data.all_income
					this.dataInfo = res.data.list
				})
			},
			getList() {
				batteryList().then(res => {
					console.log(res)
					for (let i = 0; i < res.data.length; i++) {
						res.data[i].isCheck = false
					}
					this.list = res.data
				})
			},
			endOrderFn(id){
				this.order_id = id;
				this.showOverOrder = true;
			},
			endOrderFnSubmit(type) {
				endOrder({
					id:this.order_id,
					type:type
				}).then(res => {
					console.log(res)
					if(res.code == '1'){
						this.showOverOrder = false;
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
						this.getList();
						this.getMoney();
					}
				})
			},
			close(){
				this.showOverOrder = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		// width: 100%;
		// height: 100%;
		// background-color: #f6f6f6;
	}

	.flex {
		display: flex;
		background-color: #FFFFFF;

		.navTitle {
			height: 80upx;
			line-height: 80upx;
			width: 100%;
			text-align: center;
			font-size: 28upx;
			font-family: "PingFang";
			color: rgb(102, 102, 102);


			.active {
				position: relative;
				color: #4eb3ff;
			}

			.active::after {
				content: "";
				position: absolute;
				width: 60upx;
				height: 4upx;
				background-color: #4eb3ff;
				left: 0px;
				right: 0px;
				bottom: 0px;
				margin: auto;

			}
		}
	}

	.nav_item {
		// margin-top: 15upx;

		.tit {
			width: calc(100%);
			height: 90upx;
			background-color: #FFFFFF;
			padding: 0 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 15upx;

			image {
				width: 15upx;
			}
		}

		.charge {
			width: calc(100%);
			margin: 0 auto;
			background-color: #FFFFFF;

			.charge_item {
				padding: 30upx;
				border-bottom: 1upx solid #f7f7f7;

				.item_top {
					display: flex;
					justify-content: space-between;

					.top_left {
						font-size: 28upx;
						color: #363636;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.add {
							text {
								color: #999;
								font-size: 24upx;
							}
						}

						.date {
							color: #999;
							font-size: 24upx;
						}
					}

					.top_right {
						font-size: 24upx;
						color: #363636;

						.status {
							font-size: 28upx;
							color: #22d0bf;
							display: flex;
							justify-content: center;
						}
					}
				}

				.item_b {
					margin-top: 20upx;
					font-size: 28upx;
					color: #747474;

					view {
						margin-bottom: 10upx;

						text {
							color: #ff7270;
						}
					}

				}

			}
		}



	}

	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 99;
		background: rgba($color: #000000, $alpha: 0.3);
		display: flex;
		align-items: center;
		justify-content: center;

		.operation {
			width: 580upx;
			// height: 200upx;
			padding: 10upx 0;
			background: #FFFFFF;
			border-radius: 12px;
			position: relative;
			overflow: hidden;

			.tit {
				width: calc(100%);
				height: 60upx;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.list {
				width: 100%;
				background-color: #FFFFFF;
				min-height: 600upx;

				.list_item {
					width: calc(100%);
					height: 150upx;
					margin: 0 auto;
					border-bottom: 1upx solid #e9e6e9;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						display: flex;
						align-items: center;

						image {
							width: 80upx;
							margin-right: 10upx;
						}

						view {
							font-size: 28upx;

							.name {
								width: 300upx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.money {
								font-size: 24upx;
								color: #999999;

								text {
									color: #fb817f;
								}
							}
						}

						// text {
						// 	font-size: 24upx;
						// 	color: #999;
						// }
					}

					.right {
						display: flex;
						align-items: center;

						input {
							min-width: 250upx;
							text-align: right;
							margin-right: 10upx;
						}

						text {
							font-size: 28upx;
							color: #999999;
						}

						image {
							width: 15upx;
							margin-left: 10upx;
						}
					}

					.img {
						image {
							width: 40upx;
						}
					}
				}

			}
		}
	}
	
	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: rgba($color: #000000, $alpha: 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		
		.content {
			width: 560upx;
			height: 300upx;
			background-color: #FFFFFF;
			border-radius: 12upx;
			padding: 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			image {
				width: 30upx;
			}
			
			.tit {
				width: 100%;
				text-align: center;
				font-size: 32upx;
				margin-bottom: 10upx;
				font-weight: bold;
			}
			
			.list {
				display: flex;
				justify-content: space-around;
				.list-item {
					width: 48%;
					height: 76upx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: none;
					color:#FFFFFF;
					background: #3eb9fe;
					border-radius: 30rpx;
					&:first-child{
						color:#999;
						background: transparent;
						border: 2rpx solid #999999;
					}
				}
			}
			
		}
	}
	.u-btn{
		border: 2rpx solid #3eb9fe;
		padding: 8rpx 18rpx;
		border-radius: 20rpx;
		color: #3eb9fe;
		margin-top: 10rpx;
	}

</style>
